<template>
  <div class="content">

    <!-- 左侧设备面板 -->
    <!-- 展开状态 -->
    <div class="equipment_open" v-if="panelOpenCLose">
      <!-- <div class="changeBar">
                <div class="title" :class="{ active_title: activeKey === index + 1 }" v-for="(item, index) in barList"
                    :key="item" @click="handleChangeTitle(index + 1)">{{ item }}</div>
            </div> -->
      <div class="numCount">
        <div class="num">
          设备列表 （{{ deviceList.length }}）
        </div>
        <div class="return" @mouseover="arrowHover(true)" @mouseleave="arrowHover(false)" @click="handlePanelOpenCLose()">
          <Image v-if="returnHover" :src="arrow_hover_left" :preview="false" />
          <Image v-else :src="arrow_left" :preview="false" />
        </div>
      </div>
      <!-- 设备list -->
      <div class="list">
        <div class="item" v-for="(item, index) in deviceList" :key="item.id">
          <div class="static">
            <div class="static_item bg_normal"
              :class="{ static_item_active: activeItemIndex === index, bg_error: item.deviceOsd && item.deviceOsd.mode_codeObj.color == 0 }"
              @click="handleItemClick(index)">
              <div class="top">
                <div class="eq_pic">
                  <Image :src="drone" :preview="false" />
                </div>
                <div class="proj_status">
                  <div class="proj">
                    <div class="icon">
                      <Image :src="eq_status" :preview="false" />
                    </div>
                    <div class="proj_name">
                      {{ item.deviceName }}
                    </div>
                  </div>
                  <div class="model">
                    {{ item.deviceModel }}
                  </div>
                </div>
                <div class="power">
                  <div class="value"> {{ item.gatewayOsd?.capacity_percent }}</div>
                  <Power :percent='item.gatewayOsd?.capacity_percent' />
                </div>
              </div>
              <div class="proj_detail">
                <div class="txt">
                  <div class="icon" v-if="item.deviceOsd && item.deviceOsd.mode_codeObj.color == 0">
                    <Image :src="error" :preview="false" />
                  </div>
                  <span v-if="item.deviceOsd && item.deviceOsd.mode_codeObj"> {{
                    item.deviceOsd.mode_codeObj.label }}</span>
                </div>
              </div>
              <div class="connect">
                <div class="department">
                  <Image :src="department" :preview="false" />
                  <div class="txt">深圳华平股份产品部</div>

                </div>
                <div class="phone">
                  <Image :src="phone" :preview="false" />
                  <div class="txt">{{ item.contactPhone }}</div>

                </div>
                <div class="people">
                  <Image :src="people" :preview="false" />
                  <div class="txt">{{ item.contactName }}</div>
                </div>
              </div>
              <div class="type">
                <div class="val pilot">
                  <span v-if="item.deviceType == 3">机场</span>
                  <span v-else-if="item.deviceType == 0">飞行器</span>
                  <span v-else-if="item.deviceType == 2">遥控器</span>
                  <!-- AIRCRAFT("0", "飞行器"),
                    LOAD("1","负载类"),
                    CONTROL("2", "遥控器"),
                    DOCK("3", "机场"); -->
                </div>
              </div>
            </div>
          </div>
          <!-- 设备面板直播监控界面 -->
          <div class="video" @click="setModal1Visible(false)" v-if="item.liveStatus">
            <!-- 上层操作按钮 -->
            <div class="top_op">
              <div class="top_button">
                <div class="window_name">
                  窗口-窗口名字
                </div>
                <div class="change_focus">
                  变焦
                </div>
                <div class="screen_close">
                  <div class="full_screen">
                    <Image :src="full_screen" :preview="false" @click="handleAllFullScreen(true)" />
                  </div>
                  <div class="close" @click="handlestopLive(item.deviceLiveId)">
                    <Image :src="close" :preview="false" />
                  </div>
                </div>
              </div>
              <div class="bottom_button">
                <div class="angle_infrared">
                  <div class="wide_angle" @click="changeCamera(item.deviceLiveId, 'wide')">
                    广角
                  </div>
                  <div class="infrared" @click="changeCamera(item.deviceLiveId, 'ir')">
                    红外
                  </div>
                </div>
                <div class="status_operation">
                  <div class="video_status">
                    <div class="error_circle"></div>
                    <div class="txt">
                      直播中
                    </div>
                  </div>
                  <div class="refresh" @click="queryLiveStatus(item.id)">
                    <Image :src="refresh_hover" width="20px" height="20px" :preview="false" />
                  </div>
                  <div class="set">
                    <Image :src="set_hover" width="20px" height="20px" :preview="false"
                      @click.stop=setModal1Visible(true) />
                    <!-- 清晰度弹窗 -->
                    <div class="clarity" v-if="clarityVisible">
                      <div class="options" v-for="item2 in clarityList" :key="item2.value"
                        @click="setModal1Visible(false, item2.value, item.deviceLiveId)">
                        <span :class="{ active: clarityIndex == item2.value }">{{ item2.label
                        }}</span>

                      </div>
                    </div>

                  </div>
                </div>
              </div>
            </div>

            <div class="bottom_video">
              <LivePlayer @snapOutside="snapOutside" ref="player2" :videoUrl="flvURL" live />
            </div>


          </div>
        </div>
        <!-- <div class="item">
                    <div class="static">
                        <div class="static_item bg_error" :class="{ static_item_active: activeItemIndex === 2 }"
                            @click="handleItemClick(2)">
                            <div class="top ">
                                <div class="eq_pic">
                                    <Image :src="drone" :preview="false" />
                                </div>
                                <div class="proj_status">
                                    <div class="proj">
                                        <div class="icon">
                                            <Image :src="eq_status" :preview="false" />
                                        </div>
                                        <div class="proj_name">
                                            天府新区河道巡检项目
                                        </div>
                                    </div>
                                    <div class="model">
                                        M300RTK
                                    </div>
                                </div>
                                <div class="power">
                                    <div class="value"> 98%</div>
                                    <Power percent='80' />
                                </div>
                            </div>
                            <div class="proj_detail">
                                <div class="txt">
                                    <div class="icon">
                                        <Image :src="error" :preview="false" />
                                    </div>
                                    机场-执行项目天府新区河道巡检项目河道巡检项目河
                                </div>
                            </div>
                            <div class="connect">
                                <div class="department">
                                    <Image :src="department" :preview="false" />
                                    <div class="txt">深圳华平股份产品部</div>

                                </div>
                                <div class="phone">
                                    <Image :src="phone" :preview="false" />
                                    <div class="txt">130-2323-4231</div>

                                </div>
                                <div class="people">
                                    <Image :src="people" :preview="false" />
                                    <div class="txt">李轩</div>
                                </div>
                            </div>
                            <div class="type">
                                <div class="val airport">
                                    机场
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="static">
                        <div class="static_item bg_error" :class="{ static_item_active: activeItemIndex === 2 }"
                            @click="handleItemClick(2)">
                            <div class="top ">
                                <div class="eq_pic">
                                    <Image :src="drone" :preview="false" />
                                </div>
                                <div class="proj_status">
                                    <div class="proj">
                                        <div class="icon">
                                            <Image :src="eq_status" :preview="false" />
                                        </div>
                                        <div class="proj_name">
                                            天府新区河道巡检项目
                                        </div>
                                    </div>
                                    <div class="model">
                                        M300RTK
                                    </div>
                                </div>
                                <div class="power">
                                    <div class="value"> 98%</div>
                                    <Power :percent='20' />
                                </div>
                            </div>
                            <div class="proj_detail">
                                <div class="txt">
                                    <div class="icon">
                                        <Image :src="error" :preview="false" />
                                    </div>
                                    机场-执行项目天府新区河道巡检项目河道巡检项目河
                                </div>
                            </div>
                            <div class="connect">
                                <div class="department">
                                    <Image :src="department" :preview="false" />
                                    <div class="txt">深圳华平股份产品部</div>

                                </div>
                                <div class="phone">
                                    <Image :src="phone" :preview="false" />
                                    <div class="txt">130-2323-4231</div>

                                </div>
                                <div class="people">
                                    <Image :src="people" :preview="false" />
                                    <div class="txt">李轩</div>
                                </div>
                            </div>
                            <div class="type">
                                <div class="val airport">
                                    机场
                                </div>
                            </div>
                        </div>
                    </div>
                </div> -->
      </div>
    </div>
    <div class="equipment_close" v-else>
      <div class="bottom">
        <div class="return" @mouseover="arrowHover(true)" @mouseleave="arrowHover(false)" @click="handlePanelOpenCLose()">
          <Image v-if="returnHover" :src="arrow_hover_right" :preview="false" />
          <Image v-else :src="arrow_right" :preview="false" />
        </div>
      </div>
    </div>
    <!-- 右侧地图 -->
    <div class="map">
      <!-- 地图容器 -->
      <div id="container"></div>
      <!-- 天气 -->
      <!-- <div class="weather">

            </div> -->
      <!-- 3D地图切换 -->
      <div class="change_map" @click="handleChangeMap()">
        <Image v-if="mapType == '3D'" :src="mapIcon" :preview="false" />
        <Image v-else :src="map_3D" :preview="false" />
      </div>
      <!-- 底部设备属性条 -->
      <div class="attribute" v-if="currentDeviceInfo">
        <!-- 前面差异化 -->
        <!-- 机场独有 -->
        <div class="airport_have" v-if="currentDeviceInfo.deviceType == 0">
          <!-- 飞机状态 -->
          <div class="eq_status">
            <Image :src="airport_icon" :preview="false" />
            <!-- 正常状态 -->
            <div class="val" v-if="currentDeviceInfo.state == 1">
              <div class="circle normal_circle"></div>
              在线
            </div>
            <!-- 报错状态 -->
            <div class="val" v-else>
              <div class="circle warning_circle"></div>
              离线
            </div>
          </div>
          <!-- 隔离 -->
          <div class="sperator" style="margin-top: 8px;"></div>
          <!-- 直播摄像头 -->
          <div class="monitor box1 " :class="{ box1_active: activeCameraIndex === 0 }" @click="handleCameraChange(0)">
            <Image :src="monitor" :preview="false" />
            <div class="txt">监控</div>
            <div class="normal_circle"></div>
          </div>
          <!-- 媒体上传 -->
          <div class="file_up box2">
            <Image :src="file_up" :preview="false" />
            <div class="txt">
              <div class="top">
                媒体上传
              </div>
              <div class="bottom">
                12
              </div>
            </div>
          </div>
          <!-- 网络 -->
          <div class="image_signal box2">
            <Image :src="signal" :preview="false" />
            <div class="txt">
              <div class="top">
                网络
              </div>
              <div class="bottom">
                42.4 KB/s
              </div>
            </div>
          </div>
        </div>
        <!-- 遥控器独有 -->
        <div class="pilot_have" v-else-if="currentDeviceInfo.deviceType == 2">
          <!-- 遥控器状态 -->
          <div class="pilot_status eq_status">
            <Image :src="pilot" :preview="false" />
            <!-- 正常状态 -->
            <div class="val" v-if="currentDeviceInfo.state == 1">
              <div class="circle normal_circle"></div>
              在线
            </div>
            <!-- 报错状态 -->
            <div class="val" v-else>
              <div class="circle warning_circle"></div>
              离线
            </div>
          </div>
        </div>
        <!-- 隔离 -->
        <div class="sperator"></div>
        <div class="box1" :class="{ box1_active: activeCameraIndex === index + 1 }"
          v-for="(item, index) in currentDeviceInfo.liveCapacity.device_list[0].camera_list"
          @click="handleCameraChange(index + 1)">
          <Image :src="camera" :preview="false" />
          <div class="txt">
            {{ item.cameraInfo.name }}
          </div>
          <div class="normal_circle"></div>
        </div>
        <!-- 图传信号 -->
        <div class="image_signal box2">
          <Image :src="signal" :preview="false" />
          <div class="txt">
            <div class="top">
              图传信号
            </div>
            <div class="bottom">
              <!-- {{currentDeviceInfo.gatewayOsd.wireless_link.4g_quality}}dBM -->
              强
            </div>
          </div>
        </div>
        <!-- 电量 -->
        <div class="image_signal box2">
          <Image :src="power" width="22px" height="26px" :preview="false" />
          <div class="txt">
            <div class="top">
              电量
            </div>
            <div class="bottom">
              {{ currentDeviceInfo?.deviceOsd?.battery?.capacity_percent }}%
            </div>
          </div>
        </div>
        <!-- 搜星数 -->
        <div class="image_signal box2">
          <Image :src="search_star" :preview="false" />
          <div class="txt">
            <div class="top">
              搜星数
            </div>
            <div class="bottom">
              {{
                currentDeviceInfo.deviceOsd?.position_state.gps_number +
                currentDeviceInfo.deviceOsd?.position_state.rtk_number
              }}
            </div>
          </div>
        </div>
        <!-- 海拔高度 -->
        <div class="image_signal box2">
          <Image :src="altitude" :preview="false" />
          <div class="txt">
            <div class="top">
              海拔高度
            </div>
            <div class="bottom">
              {{ parseInt(currentDeviceInfo.deviceOsd?.height) }}m
            </div>
          </div>
        </div>
        <!-- 相对地面高度 -->
        <div class="image_signal box2">
          <Image :src="relative_ground_height" :preview="false" />
          <div class="txt">
            <div class="top">
              相对地面高度
            </div>
            <div class="bottom">
              {{ currentDeviceInfo.gatewayOsd?.height }}m
            </div>
          </div>
        </div>
        <!-- 起飞点距离 -->
        <div class="image_signal box2">
          <Image :src="take_off_distance" :preview="false" />
          <div class="txt">
            <div class="top">
              起飞点距离
            </div>
            <div class="bottom">
              {{ parseInt(currentDeviceInfo.deviceOsd?.home_distance) }}m
            </div>
          </div>
        </div>
        <!-- 高度速度 -->
        <div class="image_signal box2">
          <Image :src="altitude_speed" :preview="false" />
          <div class="txt">
            <div class="top">
              高度速度
            </div>
            <div class="bottom">
              {{ parseInt(currentDeviceInfo.deviceOsd?.vertical_speed) }}m/s
            </div>
          </div>
        </div>
        <!-- 水平速度 -->
        <div class="image_signal box2">
          <Image :src="horizontal_speed" :preview="false" />
          <div class="txt">
            <div class="top">
              水平速度
            </div>
            <div class="bottom">
              {{ parseInt(currentDeviceInfo.deviceOsd?.horizontal_speed) }}m/s
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 全屏直播 -->
    <div class="all_video" v-if="allFullScreen">
      <div class="close" @click="handleAllFullScreen(false)">
        <Image :src="close" :preview="false" width="50px" height="50px" />
      </div>
      <LivePlayer @snapOutside="snapOutside" ref="player2" :videoUrl="flvURL" live aspect="fullscreen" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, getCurrentInstance } from 'vue';
import AMapLoader from '@amap/amap-jsapi-loader';
import { Image } from 'ant-design-vue';
import Power from '@/components/power/index.vue';
import LivePlayer from '@liveqing/liveplayer-v3' // vue3
import coordtransform from 'coordtransform';
import { list, attributes, setLiveCamera, queryLive, setQuality, startLive, stopLive, closeLight } from './data.api';
import { cameraType } from './mapData'
// 图标引入
import arrow_left from '@/assets/icons/drone/arrow_left.svg';
import arrow_hover_left from '@/assets/icons/drone/arrow_hover_left.svg';
import arrow_right from '@/assets/icons/drone/arrow_right.svg';
import arrow_hover_right from '@/assets/icons/drone/arrow_hover_right.svg';
import drone from '@/assets/icons/drone/drone.png';
import eq_status from '@/assets/icons/drone/eq_status.svg';
import people from '@/assets/icons/drone/people.svg';
import department from '@/assets/icons/drone/department.svg';
import phone from '@/assets/icons/drone/phone.svg';
import error from '@/assets/icons/drone/error.svg';
import airport_icon from '@/assets/icons/drone/airport_icon.svg';
import altitude_speed from '@/assets/icons/drone/altitude_speed.svg';
import altitude from '@/assets/icons/drone/altitude.svg';
import camera from '@/assets/icons/drone/camera.svg';
import video from '@/assets/icons/drone/video.svg';
import monitor from '@/assets/icons/drone/monitor.svg';
import drone_icon from '@/assets/icons/drone/drone_icon.svg';
import horizontal_speed from '@/assets/icons/drone/horizontal_speed.svg';
import pilot from '@/assets/icons/drone/pilot.svg';
import search_star from '@/assets/icons/drone/search_star.svg';
import take_off_distance from '@/assets/icons/drone/take_off_distance.svg';
import weather from '@/assets/icons/drone/weather.svg';
import signal from '@/assets/icons/drone/signal.svg';
import relative_ground_height from '@/assets/icons/drone/relative_ground_height.svg';
import mapIcon from '@/assets/icons/drone/map.svg';
import mapIcon_hover from '@/assets/icons/drone/map_hover.svg';
import map_3D from '@/assets/icons/drone/map_3D.svg';
import map_3D_hover from '@/assets/icons/drone/map_3D_hover.svg';
import close from '@/assets/icons/drone/close.svg';
import close_hover from '@/assets/icons/drone/close_hover.svg';
import full_screen_hover from '@/assets/icons/drone/full_screen_hover.svg';
import full_screen from '@/assets/icons/drone/full_screen.svg';
import file_up from '@/assets/icons/drone/file_up.svg';
import refresh from '@/assets/icons/drone/refresh.png';
import refresh_hover from '@/assets/icons/drone/refresh_hover.png';
import set from '@/assets/icons/drone/set.png';
import set_hover from '@/assets/icons/drone/set_hover.png';
import mark_drone from '@/assets/icons/drone/mark_drone.svg';
import mark_pilot from '@/assets/icons/drone/mark_pilot.svg';
import mark_airport from '@/assets/icons/drone/mark_airport.svg';
import power from '@/assets/icons/drone/power.svg';
const internalInstance = getCurrentInstance()
// -------------------------左侧设备面板相关 start----------------------------

// 左侧设备面板激活key  设备1 航线2  标记3
const activeKey = ref(1);
const barList: string[] = ['设备', '航线', '标记'];
// 切换左侧面板项目
const handleChangeTitle = (index: number) => {
  activeKey.value = index;
}
// 面板悬浮变量
const returnHover = ref(true)
const arrowHover = (flag: boolean) => {
  returnHover.value = flag
}
// 面板收起展开变量
const panelOpenCLose = ref(true)
// 面板收起展开事件
const handlePanelOpenCLose = () => {
  panelOpenCLose.value = !panelOpenCLose.value
  returnHover.value = false
}
// 设备面板list中item选中变量
const activeItemIndex = ref(null)
// 设备面板选中变更事件
const handleItemClick = (index: number) => {
  if (timer) {
    clearInterval(timer)
    timer = null
  }
  activeItemIndex.value = index
  currentDeviceInfo = deviceList[index]
  console.log('currentDeviceInfo', currentDeviceInfo)
  currentDeviceInfo.index = index
  // 切换地图中心点
  map.setCenter([deviceList[index].longitude, deviceList[index].latitude]);
  // 属性条轮询
  // timer = setInterval(() => {
  //     arrtiudePolling()
  // }, 1000)
}
let deviceList = reactive([]) // 直播设备列表
let currentDeviceInfo = reactive(null) // 当前选中设备
// -------------------------小窗口直播 statr-------------------------------
const clarityList = [{
  label: '高清',
  value: 4
},
{
  label: '超清',
  value: 3
},
{
  label: '标清',
  value: 2
},
{
  label: '流畅',
  value: 1
},
{
  label: '自动',
  value: 0
}]
let clarityIndex = ref(0)
const clarityVisible = ref(false)  // 直播窗口清晰度设置
const setModal1Visible = (flag: boolean, level?: number, deviceLiveId?: string) => {
  // 设置直播清晰度
  if (level !== undefined) {
    clarityIndex.value = level
    let params = {
      videoQuality: level,
      deviceLiveId
    }
    setQuality(params).then(res => {
      console.log('直播清晰度设置', res)
    })

  }
  clarityVisible.value = flag
}

const snapOutside = (snapData) => {
  alert(snapData)
}
// const flvURL = `http://172.30.50.31:89/live/test/hls.m3u8`
const flvURL = ref('')
const allFullScreen = ref(false)
// 全屏直播窗口
const handleAllFullScreen = (flag: boolean) => {
  allFullScreen.value = flag
}
// -------------------------小窗口直播 end---------------------------------

// -------------------------左侧设备面板相关 end----------------------------
// -------------------------底部设备属性条相关 start------------------------
// 飞机相机与直播相机选中变量
const activeCameraIndex = ref(1)
// 相机切换事件
const handleCameraChange = (index: number) => {
  activeCameraIndex.value = index
  // 判断该设备是否已开启直播
  if (deviceList[currentDeviceInfo.index].liveStatus) {
    // 已开启直播,判断设备类型
    switch (deviceList[currentDeviceInfo.index].deviceType) {
      case '0': // 机场
        // 判断摄像头(三路直播)
        break;
      case '2': // 遥控器
        // 切换摄像头
        break;
    }
  } else {
    // 开启直播
    let params = {
      deviceId: currentDeviceInfo.id,
      deviceSn: currentDeviceInfo.deviceSn,
      cameraId: currentDeviceInfo.liveCapacity.device_list[0].camera_list[index - 1].camera_index,
      videoIndex: currentDeviceInfo.liveCapacity.device_list[0].camera_list[index - 1].video_list[0].video_index,

    }
    // 未开启直播,开启直播
    startLive(params).then(res => {
      console.log('开启直播', res)
      // 开启直播成功后，标记该设备直播已开启
      // flvURL.value = res.livePalyUrl
      flvURL.value = res.liveUrl.replace('rtmp://', 'http://') + '/hls.m3u8'
      deviceList[currentDeviceInfo.index].liveStatus = true
      deviceList[currentDeviceInfo.index].deviceLiveId = res.deviceLiveId
      // 判断该设备类型
      internalInstance.ctx.$forceUpdate()
    })
  }

}

// 设置直播镜头
const changeCamera = (deviceLiveId: number, videoType: string) => {
  let params = {
    deviceLiveId,
    videoType: 'wide',
  }
  setLiveCamera(params).then(res => {
    console.log('设置直播镜头', res)
  })
}

// 查询直播
const queryLiveStatus = (deviceLiveId: number) => {
  let params = {
    deviceLiveId: deviceLiveId,
  }
  queryLive(params).then(res => {
    console.log('查询直播', res)
  })
}

// 结束直播
const handlestopLive = (deviceLiveId: number) => {
  deviceList[currentDeviceInfo.index].liveStatus = false
  // internalInstance.ctx.$forceUpdate()

  let params = {
    deviceLiveId
  }
  stopLive(params).then(res => {
    console.log('结束直播', res)
    // 暂不考虑机场三路直播状态
  })
  // 关闭直播逻辑后台处理
  deviceList[currentDeviceInfo.index].liveStatus = false
  internalInstance.ctx.$forceUpdate()
}

// 关闭补光灯
const handleCloseLight = (deviceLiveId: number) => {
  let params = {
    deviceLiveId: 1706566330493460481,
  }
  closeLight(params).then(res => {
    console.log('关闭补光灯', res)
  })
}
// 定时器变量
let timer: any = null
// 属性条轮询
const arrtiudePolling = (deviceSn: string) => {
  // let params = {
  //     deviceSn: currentDeviceInfo.deviceSn
  // }
  list({}).then(res => {
    // const index = currentDeviceInfo.index
    currentDeviceInfo = res[activeItemIndex.value]
    currentDeviceInfo.index = activeItemIndex.value
    markGenerate(res)
    internalInstance.ctx.$forceUpdate()
  })
}
// -------------------------底部设备属性条相关 end--------------------------
// -------------------------地图 start-------------------------------------
let map = reactive({})  // 高德地图实例对象
let AmapObj = reactive({})  // 高德地图实例对象
let coordinateList = ref([]) // 设备坐标数组
let mapType = ref('2D') // 地图类型 2D/3D
let markPilot = reactive({}) // 地图上的遥控器icon
let markDrone = reactive({}) // 地图上的无人机icon
let markAirport = reactive({}) // 地图上的机场icon

window._AMapSecurityConfig = {
  securityJsCode: '7ade37671ff0cdf564a373a0953a211a',
}
AMapLoader.load({
  "key": "c0a4f8724ce7a590dd812ec80686e7ed",              // 申请好的Web端开发者Key，首次调用 load 时必填
  "version": "2.0",   // 指定要加载的 JS API 的版本，缺省时默认为 1.4.15
  "plugins": [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
}).then((AMap) => {
  AmapObj = AMap
  map = new AMap.Map('container', {
    center: [113.93654, 22.53850], // 设置地图中心点为北京坐标
    zoom: 11,
    zooms: [4, 18],
    viewMode: '3D',//使用3D视图
    // layers: [
    //     satellite,
    //     roadNet
    // ]
  });
  // 将创建的点标记添加到已有的地图实例：
  // map.setFitView();

}).catch(e => {
  console.log(e);
})

// 地图图层切换
const handleChangeMap = () => {

  if (mapType.value == '2D') {
    mapType.value = '3D'
    var satellite = new AMap.TileLayer.Satellite();
    var roadNet = new AMap.TileLayer.RoadNet();
    map = new AMap.Map('container', {
      center: [113.93654, 22.53850], // 设置地图中心点为北京坐标
      zoom: 11,
      zooms: [4, 18],
      viewMode: '3D',//使用3D视图
      layers: [
        satellite,
        roadNet,
      ]
    });
  } else {
    mapType.value = '2D'
    map = new AMap.Map('container', {
      center: [113.93654, 22.53850], // 设置地图中心点为北京坐标
      zoom: 11,
      zooms: [4, 18],
      viewMode: '3D',//使用3D视图
      // layers: [
      //     satellite,
      //     roadNet
      // ]
    });

  }
  markGenerate(deviceList)
}

// 地图覆盖点生成
const markGenerate = (list: array) => {
  map.clearMap();
  let marker = []
  console.log('list', list)
  list.forEach((item, index) => {
    if (item.gatewayOsd) {
      let lon1 = item.gatewayOsd.longitude
      let lat1 = item.gatewayOsd.latitude
      if (lon1 != 0 && lat1 != 0) {
        let position1 = coordtransform.wgs84togcj02(lon1, lat1)
        let temp = new AmapObj.Marker({
          position: new AmapObj.LngLat(position1[0], position1[1]),
          offset: new AmapObj.Pixel(-10, -10),
          icon: item.deviceType == 0 ? mark_airport : item.deviceType == 1 ? mark_drone : mark_pilot,
          title: item.deviceName
        });

        marker.push(
          temp
        )
      }

      // 查询下面有无设备
      if (item.deviceOsd) {


        let lon2 = item.deviceOsd.longitude
        let lat2 = item.deviceOsd.latitude
        if (lon2 != 0 && lat2 != 0) {
          let position2 = coordtransform.wgs84togcj02(lon2, lat2)
          let temp2 = new AMap.Marker({
            position: new AMap.LngLat(position2[0], position2[1]),
            offset: new AMap.Pixel(-10, -10),
            icon: mark_drone,
            title: item.deviceName
          });
          marker.push(
            temp2
          )
        }
      }

    }

  })
  map.add(marker)
  if (activeItemIndex.value == null) {
    map.setFitView()
  }
  map.setFitView()
  internalInstance.ctx.$forceUpdate()
  console.log('重新绘制')
}

// -------------------------地图 end-------------------------------------
// var wgs84togcj02 = coordtransform.wgs84togcj02(114.118541, 22.698018);
// console.log('wgs84togcj02',wgs84togcj02)
list({}).then(res => {
  deviceList = res
  deviceList.map(item => {
    if (item.deviceOsd) {
      switch (item.deviceOsd.mode_code) {
        case 0:
          item.deviceOsd.mode_codeObj = {
            label: '待机',
            value: item.deviceOsd.mode_code,
            color: 1
          }
          break
        case 1:
          item.deviceOsd.mode_codeObj = {
            label: '待机',
            value: item.deviceOsd.mode_code,
            color: 1
          }
          break
        case 2:
          item.deviceOsd.mode_codeObj = {
            label: '待机',
            value: item.deviceOsd.mode_code,
            color: 1
          }
          break
        case 3:
          item.deviceOsd.mode_codeObj = {
            label: '待机',
            value: item.deviceOsd.mode_code,
            color: 1
          }
          break
        case 4:
          item.deviceOsd.mode_codeObj = {
            label: '待机',
            value: item.deviceOsd.mode_code,
            color: 1
          }
          break
        case 5:
          item.deviceOsd.mode_codeObj = {
            label: '待机',
            value: item.deviceOsd.mode_code,
            color: 1
          }
          break
        case 6:
          item.deviceOsd.mode_codeObj = {
            label: '全景拍照',
            value: item.deviceOsd.mode_code,
            color: 1
          }
          break
        case 7:
          item.deviceOsd.mode_codeObj = {
            label: '智能跟随',
            value: item.deviceOsd.mode_code,
            color: 1
          }
          break
        case 8:
          item.deviceOsd.mode_codeObj = {
            label: 'ADS-B 躲避',
            value: item.deviceOsd.mode_code,
            color: 0
          }
          break
        case 9:
          item.deviceOsd.mode_codeObj = {
            label: '自动返航',
            value: item.deviceOsd.mode_code,
            color: 1
          }
          break
        case 10:
          item.deviceOsd.mode_codeObj = {
            label: '自动降落',
            value: item.deviceOsd.mode_code,
            color: 1
          }
          break
        case 11:
          item.deviceOsd.mode_codeObj = {
            label: '强制降落',
            value: item.deviceOsd.mode_code,
            color: 0
          }
          break
        case 12:
          item.deviceOsd.mode_codeObj = {
            label: '三桨叶降落',
            value: item.deviceOsd.mode_code,
            color: 0
          }
          break
        case 13:
          item.deviceOsd.mode_codeObj = {
            label: '升级中',
            value: item.deviceOsd.mode_code,
            color: 0
          }
          break
        case 14:
          item.deviceOsd.mode_codeObj = {
            label: '未连接',
            value: item.deviceOsd.mode_code,
            color: 0
          }
          break
        case 15:
          item.deviceOsd.mode_codeObj = {
            label: 'APAS',
            value: item.deviceOsd.mode_code,
            color: 1
          }
          break
        case 16:
          item.deviceOsd.mode_codeObj = {
            label: '虚拟摇杆状态',
            value: item.deviceOsd.mode_code,
            color: 1
          }
          break
        case 17:
          item.deviceOsd.mode_codeObj = {
            label: '指令飞行',
            value: item.deviceOsd.mode_code,
            color: 1
          }
          break
      }
    }
    // 相机名称
    if (item.liveCapacity) {
      item.liveCapacity.device_list.forEach(item2 => {
        item2.camera_list.forEach(item3 => {
          let indexType = ""
          let arr = item3.camera_index.split("-")
          indexType = arr[0] + arr[1]
          for (let key in cameraType) {
            if (key == indexType) {
              item3.cameraInfo = cameraType[key]
              break
            }
          }
        })

      })
    }

  })
  console.log('deviceList123', deviceList)
  markGenerate(deviceList)
  internalInstance.ctx.$forceUpdate()

})
</script>
<style lang="less" scoped>
// 去除高德地图logo
/deep/ .amap-logo {
  display: none !important;
}

/deep/ .amap-copyright {
  display: none !important;
}

image {
  width: 100%;
  height: 100%;
}

.content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;

  // 全屏直播
  .all_video {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;

    .close {
      position: absolute;
      right: 140px;
      top: 30px;
      z-index: 3;
    }
  }

  .equipment_open {
    width: 395px;
    height: 100%;

    .changeBar {
      width: 100%;
      display: flex;
      justify-content: space-between;
      text-align: center;
      background: linear-gradient(180deg, #FCFCFC 0%, #F5F5F5 100%);

      .title {
        width: 33.33%;
        height: 53px;
        line-height: 53px;
        font-size: 18px;
        cursor: pointer;
      }

      .active_title {
        background: #FFFFFF;
        backdrop-filter: blur(5px);
        color: #167DB5;
      }
    }

    .numCount {
      height: 40px;
      width: 100%;
      padding: 0 13px 0 19px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #FFFFFF;
      border-bottom: 1px solid #EBEBEB;
      font-size: 16px;

      .return {

        cursor: pointer;
      }
    }

    .list {
      // height: 79vh; // 准确数据，后期还原
      height: 87vh;
      padding: 14px 18px 0 19px;
      background: #FFFFFF;
      overflow-y: scroll;

      .bg_normal {
        .top {
          background: linear-gradient(360deg, #FFFFFF 0%, rgba(239, 255, 237, 0.84) 100%);
        }

        .proj_detail {
          background: #F3FCF9;

          .txt {
            color: #1D986C;
          }
        }
      }

      .bg_error {
        .top {
          background: linear-gradient(360deg, #FFFFFF 0%, rgba(255, 223, 223, 0.84) 100%);
        }

        .proj_detail {
          background: #FFF5F5;

          .txt {
            color: #F34032;
          }
        }
      }

      .static {
        .static_item {
          margin-bottom: 12px;
          width: 100%;
          // height: 181px;
          box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.09);
          border-radius: 4px;
          backdrop-filter: blur(2px);
          overflow: hidden;
          border: 2px solid rgba(0, 0, 0, 0);
          cursor: pointer;


          .top {
            padding: 20px 14px 0 16px;
            display: flex;
            overflow: hidden;

            .eq_pic {
              width: 49px;
              height: 49px;
              background: #FFFFFF;
            }

            .proj_status {
              margin: 0 0 0 11px;

              .proj {
                display: flex;
                align-items: center;
                width: 212px;

                .icon {
                  margin: 0 8px 4px 0;
                }

                .proj_name {
                  font-weight: 600;
                  color: #333333;
                  line-height: 20px;
                }
              }

              .model {
                font-size: 12px;
                color: #666666;
                line-height: 17px;
              }
            }

            .power {
              display: flex;
              align-items: center;
              margin-bottom: 22px;

              .value {
                margin-right: 3px;
              }

              .icon {
                margin-left: 3px;

                .out {
                  display: flex;
                  align-items: center;

                  .tail {
                    padding: 1px;
                    width: 20px;
                    height: 12px;
                    border: 2px solid #0CB883;

                    .percent {
                      height: 100%;
                      width: 10%;
                      background-color: #0CB883;
                    }
                  }

                  .head {
                    width: 2px;
                    height: 4px;
                    background: #0CB883;
                  }
                }
              }
            }
          }

          .proj_detail {
            padding-left: 12px;
            margin: 16px 0 0 11px;
            width: 333px;
            height: 32px;

            .txt {
              display: flex;
              align-items: center;
              font-size: 12px;
              line-height: 32px;

              .icon {
                margin: 0 3px 3px 0;
              }

            }

          }

          .connect {
            margin: 10px 0 0 23px;
            display: flex;
            flex-wrap: wrap;

            .department,
            .phone,
            .people {
              display: flex;
              align-items: center;
              margin-bottom: 8px;
              width: 50%;
              font-size: 12px;
              line-height: 17px;

              .txt {
                margin: 0 24px 0 9px;
              }
            }

            .people {
              margin: 0;
            }
          }

          .type {
            float: right;

            .val {
              padding: 0 4px;
              width: 44px;
              box-shadow: inset 0px 0px 3px 0px rgba(95, 212, 253, 0.5);
              border-radius: 4px;
              font-size: 12px;
              line-height: 17px;
              text-align: center;
            }

            .pilot {
              color: #16A4C5;
              background: rgba(73, 196, 224, 0.41);
            }

            .airport {
              color: #2595D2;
              background: rgba(76, 185, 255, 0.41);
            }

          }
        }

        .static_item_active {
          border: 2px solid #1875D3;
        }

      }

      .video {
        position: relative;
        width: 100%;
        height: 212px;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15), 0px 2px 4px 0px rgba(0, 0, 0, 0.09);
        border-radius: 4px;
        margin-bottom: 12px;
        background-color: gainsboro;
        border-radius: 4px;

        .top_op {
          position: absolute;
          top: 0;
          left: 0;
          z-index: 1;
          padding: 16px;
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          font-size: 12px;
          color: #FFFFFF;
          background-color: rgba(0, 0, 0, 0);



          .top_button {
            display: flex;
            align-items: center;

            .window_name {
              flex: 1
            }

            .change_focus {
              width: 64px;
              height: 24px;
              background: rgba(0, 0, 0, 0.15);
              border: 1px solid rgba(0, 0, 0, 0);
              border-radius: 4px;
              // opacity: 0.5;

              line-height: 21px;
              text-align: center;
              cursor: pointer;
            }

            .screen_close {
              margin-left: 76px;
              display: flex;

              .full_screen {
                margin-right: 13px;
                cursor: pointer;
              }

              .close {
                cursor: pointer;
              }
            }
          }

          .bottom_button {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .angle_infrared {
              display: flex;

              .wide_angle,
              .infrared {
                margin-right: 8px;
                width: 64px;
                height: 30px;
                background: rgba(0, 0, 0, 0.15);
                border: 1px solid rgba(0, 0, 0, 0);
                border-radius: 4px;
                line-height: 28px;
                text-align: center;
                cursor: pointer;
              }
            }

            .status_operation {
              display: flex;
              align-items: center;

              .video_status {
                display: flex;
                align-items: center;
                margin-right: 14px;

                .error_circle {
                  width: 8px;
                  height: 8px;
                  border-radius: 50%;
                  background: linear-gradient(180deg, #FF5757 0%, #FF2C2C 100%);
                  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
                  border: 1px solid #FF9E9E;
                }

                .txt {
                  margin-left: 4px;
                }
              }

              .refresh {
                margin-right: 10px;
              }

              .set {
                position: relative;

                .clarity {
                  position: absolute;
                  right: -10px;
                  top: -120px;
                  width: 60px;
                  // height: 72px;
                  border-radius: 4px;
                  background-color: rgba(0, 0, 0, 0.4);

                  .options {
                    width: 100%;
                    height: 24px;
                    line-height: 24px;
                    text-align: center;

                    .active {
                      color: #48ADFF;
                    }
                  }

                }
              }
            }
          }

          .focus {
            box-shadow: inset 0px 0px 5px 0px rgba(176, 248, 255, 0.5);
            opacity: 0.8;
            border: 1px solid rgba(133, 180, 255, 0.61);
            backdrop-filter: blur(1px);
          }
        }

        .bottom_video {
          width: 100%;
          height: 100%
        }
      }

    }
  }

  .equipment_close {
    padding-top: 50px;
    width: 46px;
    height: 100%;

    .bottom {
      background-color: #FFFFFF;
      height: 100%;

      .return {
        width: 100%;
        height: 40px;
        text-align: center;
        line-height: 40px;
        border-top: 1px solid #EBEBEB;
        border-bottom: 1px solid #EBEBEB;
        cursor: pointer;
      }
    }

  }

  .map {
    position: relative;
    flex: 1;
    width: 100%;
    height: 100%;


    #container {
      width: 100%;
      height: 100%;
    }

    .weather {
      position: absolute;
      top: 20px;
      right: 36px;
      width: 186px;
      height: 65px;
      background: linear-gradient(94deg, rgba(34, 56, 78, 0.3) 0%, rgba(30, 60, 79, 0) 100%);
      border-radius: 2px;
      backdrop-filter: blur(3px);
    }

    .change_map {
      position: absolute;
      right: 36px;
      bottom: 80px;

      cursor: pointer;
    }

    .attribute {
      position: absolute;
      bottom: 0;
      padding: 0 20px;
      width: 100%;
      height: 76px;
      display: flex;
      align-items: center;
      font-size: 12px;
      color: #FFFFFF;
      line-height: 17px;
      background-color: rgba(0, 0, 0, 0.4);
      border-radius: 4px;
      backdrop-filter: blur(2px);
      z-index: 3;

      .airport_have {
        display: flex;

        .val {
          display: flex;
          align-items: center;
        }
      }

      .normal_circle {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #37FCB6;
      }

      .warning_circle {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: red;
      }

      .circle {
        margin: 0 6px 0 16px;
      }

      .eq_status {
        display: flex;
        align-items: center;
        color: #37FCB6;
      }

      .pilot_status {
        .val {
          display: flex;
          align-items: center;
        }
      }

      .sperator {
        margin: 0 16px;
        width: 2px;
        height: 31px;
        background: rgba(90, 173, 255, 0.2);
        // border: 1px solid #979797;
      }

      .box1 {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 2px 4px;

        height: 49px;
        line-height: 17px;
        background: linear-gradient(180deg, rgba(147, 214, 255, 0.2) 0%, rgba(73, 149, 225, 0.09) 100%);
        border-radius: 4px;
        cursor: pointer;
        white-space: nowrap;

        .txt {
          white-space: nowrap;
        }

        .normal_circle {
          width: 6px;
          height: 6px;
        }
      }

      .box1_active {
        border: 1px solid #979797;
      }

      .box2 {
        display: flex;
        align-items: center;
        padding: 8px 5px;
        margin-right: 8px;
        height: 49px;
        background: rgba(90, 173, 255, 0.1);
        border-radius: 4px;

        .txt {
          margin-left: 8px;

        }
      }

      .live_streaming {
        margin: 0 12px;
      }

    }
  }

}
</style>
